<!--
    This page contains the form "Generalities Shapes"
    with information about shapes of building
-->

<script>
    function HideroofImgC(){        
        wallsArea();
        $('#roofShape1').attr('checked', true);      
        $("#roofImgC").addClass("cacher");
        $("#roofImgCinput").addClass("cacher");
    }
    function ShowroofImgC(){        
        wallsArea();
        $('#roofShape1').attr('checked', true);
        $("#roofImgC").removeClass("cacher");
        $("#roofImgCinput").removeClass("cacher");
    }
    
    function DisplayRoofPicture() {        
        if(document.getElementById('roofShape1').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofA.png');            
        }
        if(document.getElementById('roofShape2').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofB1.png');
        }
        if(document.getElementById('roofShape3').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofB2.png');
        }
        if(document.getElementById('roofShape4').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofB3.png');
        }
        if(document.getElementById('roofShape5').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofC.png');
        }
        if(document.getElementById('roofShape6').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofD.png');
        }
        if(document.getElementById('roofShape7').checked){
            $('#roofPicture').attr('src', '../images/forms/generalitiesShapes/roofE.png');
        }
    }
    
    function wallsArea(){
//        Par défaut, tous les chaps sont visibles
        $("#areaWallsDiv *").removeClass("cacher");
        if(document.getElementById('radio_square').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupSquare.png');   
            $('#areaWallsDiv #areaWallB').addClass("cacher");
            $('#areaWallsDiv #areaWallC').addClass("cacher");
            $('#areaWallsDiv #areaWallD').addClass("cacher");
            $('#areaWallsDiv #areaWallE').addClass("cacher");
            $('#areaWallsDiv #areaWallF').addClass("cacher");
        }
        if(document.getElementById('radio_rectangle').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupRectangle.png'); 
            $('#areaWallsDiv #areaWallC').addClass("cacher");
            $('#areaWallsDiv #areaWallD').addClass("cacher");
            $('#areaWallsDiv #areaWallE').addClass("cacher");
            $('#areaWallsDiv #areaWallF').addClass("cacher");
        }
        if(document.getElementById('radio_shapeL').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupL.png'); 
            $('#areaWallsDiv #areaWallE').addClass("cacher");
            $('#areaWallsDiv #areaWallF').addClass("cacher");
        }
        if(document.getElementById('radio_shapeU').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupU.png');
            $('#areaWallsDiv #areaWallE').addClass("cacher");
            $('#areaWallsDiv #areaWallF').addClass("cacher");
   
        }
        if(document.getElementById('radio_rectangle2').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupShiftedRectangle.png');   
   
        }
        if(document.getElementById('radio_shapeT').checked){
            $('#areaShape').attr('src', '../images/forms/wallsArea/SupT.png');  
            $('#areaWallsDiv #areaWallE').addClass("cacher");
            $('#areaWallsDiv #areaWallF').addClass("cacher");
           
        }
    }
</script>

<p id="subtitle">Formes</p>
<div style="height: 120px; background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">

<table id="generalitiesFormsTab" style="width: 1000px;">
    <tr>
        <th class="paddingCell" style="vertical-align: top; text-align: left; padding-top: 20px;">
            <?php echo TXT_HOUSE_SHAPE; ?>
            <img src="../images/help.png" id="tooltip" title="<?php echo TXT_HELP_HOUSE_SHAPE; ?>" />
        </th>
        <td id="tdForms">
            <table id="formsTab">
                <tr>
                    <td>

                    </td>
                    <td style="padding-right: 30px; padding-left: 20px; vertical-align: top;">
                        <img src="../images/forms/generalitiesShapes/square.png"/>
                        <br/>
                        <input checked onclick="ShowroofImgC()" type="radio" id="radio_square" name="shape" value="1">
                    </td>
                    <td style="padding-right: 30px;">
                        <img src="../images/forms/generalitiesShapes/rectangle.png"/>
                        <br/>
                        <input onclick="HideroofImgC()" type="radio" id="radio_rectangle" name="shape" value="2">
                    </td>
                    <td  style="padding-right: 30px;">
                        <img src="../images/forms/generalitiesShapes/l.png"/>
                        <br/>
                        <input onclick="HideroofImgC()" type="radio" id="radio_shapeL" name="shape" value="3">
                    </td>
                    <td  style="padding-right: 30px;">
                        <img src="../images/forms/generalitiesShapes/u.png"/>
                        <br/>
                        <input onclick="HideroofImgC()" type="radio" id="radio_shapeU" name="shape" value="4">
                    </td>
                    <td  style="padding-right: 30px;">
                        <img src="../images/forms/generalitiesShapes/shiftedRectangle.png"/>
                        <br/>
                        <input onclick="HideroofImgC()" type="radio" id="radio_rectangle2" name="shape" value="5">
                    </td>
                    <td>
                        <img src="../images/forms/generalitiesShapes/t.png"/>
                        <br/>
                        <input onclick="HideroofImgC()" type="radio" id="radio_shapeT" name="shape" value="6">
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>
</div>
<div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">

<table id="generalitiesFormsTab" style="width: 1000px;">
    <tr>
        <th style="vertical-align: top; text-align: left; padding-top: 20px;">
            <?php echo TXT_ROOF_SHAPE; ?>
        </th>
        <td style="padding-top: 20px;">
            <table id="roofShapeTab">
                <tr>
                    <td style="padding-left: 20px;">
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofA.png" width="85" name="A" />
                    </td>
                    <td>
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofB1.png" width="85" name="B1" />
                    </td>
                    <td>
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofB2.png" width="85" name="B2" />
                    </td>
                    <td>
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofB3.png" width="85" name="B3" />
                    </td>
                    <td id="roofImgC">
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofC.png" width="85" name="C" />
                    </td>
                    <td>
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofD.png" width="85" name="D" />
                    </td>
                    <td>
                        <img id="roofImg" src="../images/forms/generalitiesShapes/roofE.png" width="85" name="D" />
                    </td>
                </tr>
                <tr>
                    <td >
                        <input type="radio" name="roofShape" id="roofShape1" onclick="DisplayRoofPicture()" value="A" checked />
                    </td>
                    <td>
                        <input type="radio" name="roofShape" id="roofShape2" onclick="DisplayRoofPicture()" value="B1" />
                    </td>
                    <td>
                        <input type="radio" name="roofShape" id="roofShape3" onclick="DisplayRoofPicture()" value="B2" />
                    </td>
                    <td>
                        <input type="radio" name="roofShape" id="roofShape4" onclick="DisplayRoofPicture()" value="B3" />
                    </td>

                    <td id="roofImgCinput">
                        <input  type="radio" name="roofShape" id="roofShape5" onclick="DisplayRoofPicture()" value="C" />
                    </td>
                    <td>
                        <input type="radio" name="roofShape" id="roofShape6" onclick="DisplayRoofPicture()" value="D" />
                    </td>
                    <td>
                        <input type="radio" name="roofShape" id="roofShape7" onclick="DisplayRoofPicture()" value="E" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>